<script setup>
import api from "./api.js";
import useDepartmentStore from "@/store/modules/department.js";
const list = ref([]);

const store = useDepartmentStore();

// 获取列表
function getList() {
  api.list().then(response=> {
    const records = response.records;
    if (records && records.length) {
      const one = records[0];
      one.active = true;
      store.setCompanyId(one.id);
    }
    list.value = records;
  })
}

// 选择公司
function choose(item) {
  list.value.forEach(item => {
    item.active = false;
  });
  item.active = true;
  store.setCompanyId(item.id);
}

onMounted(()=>{
  getList();
})

</script>

<template>
  <div class="left-nav">
    <ul>
      <li v-for="c in list" :class="{active: c.active}" @click="choose(c)">
        <span>{{ c.name }}</span>
      </li>
    </ul>

  </div>
</template>

<style scoped lang="scss">
  .left-nav{
    width: 130px;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
    position: absolute;
    top: 0;
    bottom: 0;
    ul {
      margin-block-start: 0;
      margin-block-end: 0;
      padding-inline-start: 10px;
      padding: 0;
      font-size: 13px;
      li {
        list-style: none;
        padding: 10px 10px;
        font-size: 12px;
        cursor: pointer;
        &.active {
          background-color: rgba(0,91,245,.1);
        }
        &:hover {
          color: blue;
        }
      }

    }
  }
</style>